<template>
  <div class="body vertical center ">
    <div class="sm_top">
      <div :class="`item_list ${curWay.payname === item.payname ? 'active' : ''}`"
        v-for="(item, index) in legalRecharge" :key="index" @click="chooseWay(item)">
        {{ t(item.text) }}
      </div>
    </div>
    <div class="sm_content">
      <swiper
          direction="horizontal"
          :autoplay="false"
          :autoHeight="true"
          :loop="false"
          :disableOnIntercation="false"
          :touchStartPreventDefault="false"
          slidesPerView="auto"
          :space-between="5"
          :centeredSlides="true"
          class="search_page_swiper"
          @swiper="onSwiperInit"
          @slideChange="handleSwiperChange"
          >
          <swiper-slide v-for="(item, index) in legalRecharge" :key="index">
              <img :src="`/imgs/payment/sm/${lang}/withdraw/sm_${item.payname}.webp`" />
          </swiper-slide>
      </swiper>        
    </div>
  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { ref } from 'vue';
import { Local } from "@/utils/storage";
import {storeToRefs} from "pinia";
import {Page} from "@/store/page.ts";
import pinia from "@/store";
// @ts-ignore
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';


const { t } = useI18n();
const { lang } = storeToRefs(Page(pinia));
const curWay = ref(Local.get('curExplainWay') || { payname: '' });
const legalRecharge = ref<any>(Local.get('depositWayObj')?.legalRecharge || []);

const swiperInstance = ref(null);
const onSwiperInit = (swiper: any) => {
	swiperInstance.value = swiper; // 保存 Swiper 实例
};

const handleSwiperChange = (swiper: any) => {
  chooseWay(legalRecharge.value[swiper.realIndex], false);
}


// 选择充值方式
const chooseWay = (data: any, slider = true) => {
  Local.set('curExplainWay', data);
  curWay.value = data;
  if (slider) {
    // @ts-ignore
    swiperInstance.value.slideTo(legalRecharge.value.findIndex((a: any) => a.payname == data.payname));
  }
}

</script>

<style lang='scss' scoped>
.body {
  height: calc(var(--vh) * 100  - 44px);
  overflow: hidden;
  color: #93b4ff;
  font-size: 14px;

  .sm_top {
    padding: 16px 0 14px 14px;
    display: flex;
    overflow-x: auto;

    .item_list {
      text-align: center;
      position: relative;
      flex: none;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 46%;
      //min-width: 80px;
      height: 44px;
      line-height: 15px;
      //padding: 10px;
      color: #C6C4F5;

      &:nth-child(n+2) {
        margin-left: 14px;
      }
      &.active {
        color: #5B6CFF;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(180deg, #5B6CFF 0%, #9E1EFF 100%);
        }
      }

    }
  }

  .sm_content {
    padding: 0 14px 41px 14px;
    height: calc(100% - 60px);
    overflow-y: auto;

    img {
      width: 100%;
    }
  }
}
</style>